<template>
    <div style="height: 76px;line-height: 50px;display: flex;">
        <div style="width:200px ;padding-left: 30px;font-weight: bold;"><img src="../../assets/logo.png" style="height:75px;"></div>
        <div style="margin: 10px 75px; width: 500px;">
            <el-input v-model="search" placeholder="搜索" style="width: 80%" clearable/>
            <el-button type="primary" @click="load">搜索</el-button>
        </div>
        <div style="width:100px ;margin-top:10px;margin-left:200px;">
            <div v-if="user">
                <el-dropdown style="color: blue;line-height:60px">
                <span style="font-size: 20px">
                    {{ user.nickName }}
                </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click = "$router.push('/userInformation')">个人信息</el-dropdown-item>
                            <el-dropdown-item @click = "$router.push('/login')">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div v-else class="user_image">
                <div><img src="../../assets/userimage.png" @click = "login" style="height: 40px;width: 40px;"></div>
                <span @click = "login">登录/注册</span>
            </div>
        </div>
        <div><button  @click="uploade()">上传学习资料</button></div>
    </div>
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
        <el-form ref="form" :model="form" label-width="120px" >
            <el-form-item label="名称">
                <el-input v-model="form.name" style="width: 80%"/>
            </el-form-item>
            <el-form-item label="上传时间">
                <el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="date" style="width: 80%;" clearable></el-date-picker>
            </el-form-item>
            <el-form-item  label="内容">
                <el-upload action="http://localhost:9090/files/upload" :on-success="filesUploadSuccess">
                    <el-button type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="save">确认</el-button>
                    </span>
        </template>
    </el-dialog>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "Header",
        data(){
            return {
                search: '',             //用于模糊搜索的变量
                SearchKeyWord:'',
                researchYM:{},
                tableData: [],
                dialogVisible:false,
                isActive:false,
                form : {},
                user: JSON.parse(sessionStorage.getItem("user"))
            }
        },
        methods:{
            load(){
                    this.SearchKeyWord = this.search
                    this.$router.push({
                        path:'/searchYM',
                        query: {
                            data: this.SearchKeyWord
                        }
                    })
            },
            login(){
                this.$router.push('/login')
            },

            filesUploadSuccess(res){
                console.log(res)
                // if(res.data = value.replace())
                this.form.content = res.data
            },
            uploade(){
                if(this.user){
                    this.add()
                }else {
                    this.$router.push('/login')
                }
            },
            //实现新增方法
            add() {
                this.dialogVisible = true   //控制变量，以控制表单是否显示
                this.form = {}              //清空表单
                if (this.$refs['upload']) {
                    this.$refs['upload'].clearFiles()  //清空历史文件列表
                }
            },
            save(){
                if (this.$refs['upload']) {
                    this.$refs['upload'].clearFiles()  //清空历史文件列表
                }
                    let userStr = sessionStorage.getItem("user") || "{}"        //通过sessionStorage获取用户昵称，并赋值与form
                    let user = JSON.parse(userStr)
                    this.form.author = user.nickName
                    request.post("/resource",this.form).then(res => {
                        console.log(res)
                        if (res.code === '0'){
                            this.$message({
                                type: "success",
                                message: "上传成功！"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.dialogVisible = false  //关闭弹窗
                        this.load() //更新表格数据
                    })
            },
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true)
        },
        created() {
        }
    }
</script>

<style scoped>
    .user_image{
        text-align: center;
        height: 71px;
        width: 77px;
        display: flex;
        flex-wrap: wrap;
    }
    .user_image div{
        height: 42px;
        width: 40px;
    }
    .user_image div{
        height: 20px;
        width: 77px;
    }

</style>